<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Free Style Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->

<!--//fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
					jQuery(document).ready(function($) {
						$(".scroll").click(function(event){		
							event.preventDefault();
							$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
						});
					});
				</script>	
<!-- start menu -->
<script src="js/simpleCart.min.js"> </script>
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/memenu.js"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>				
</head>
<body> 
	<!--top-header-->
	<div class="top-header">
	<div class="container">
		<div class="top-header-main">
			<div class="col-md-4 top-header-left">
				<div class="search-bar">
					<input type="text" name="key" value="Search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}">
					<input type="submit" value="" onclick="likeSelect()" id="dianji">
				</div>
			</div>
			<div class="col-md-4 top-header-middle">
				<a class="index" href="index.html"><img src="images/logo-4.png" alt="" /></a>
			</div>
			<div class="col-md-4 top-header-right">
				<div class="cart box_1">
						<a href="checkout.jsp">
						<h3> <div class="total">
							<span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> 件商品)</div>
							<img src="images/cart-1.png" alt=""/></h3>
						</a>
						<p><a href="javascript:;" class="simpleCart_empty">清空购物车</a></p>
						<div class="clearfix"> </div>
					</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!--top-header-->
<!--bottom-header-->
	<div class="header-bottom">
		<div class="container">
			<div class="top-nav">
			<input type="hidden" id="uids" value="${sessionScope.users.uid}">
				<ul class="memenu skyblue"><li class="active"><a class="index" href="index.html">首页</a></li>
					<li class="grid"><a href="#">口红</a>

					</li>
					<li class="grid"><a href="#">彩妆</a>

					</li>
					<li class="grid"><a href="#">面膜</a>

					</li>
					<li class="grid"><a href="#">香水</a>

					</li>
					<li class="grid"><a href="#">套装</a>

					</li>
				</ul>

			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!--bottom-header-->
	<!--start-breadcrumbs-->
	<div class="breadcrumbs">
		<div class="container">
			<div class="breadcrumbs-main">
				<ol class="breadcrumb">
					<li><a class="index" href="index.html">首页</a></li>
					<li class="active">详情</li>
				</ol>
			</div>
		</div>
	</div>
	<!--end-breadcrumbs-->
	<!--start-single-->
	<div class="single contact">
		<div class="container">
			<div class="single-main">
				<div class="col-md-9 single-main-left">
				<div class="sngl-top">
					<div class="col-md-5 single-top-left">	
					<!-- 商品图 -->
						<div id="img">
						</div>
<script type="text/javascript">
	var uid = $("#uids").attr('value');
	if (uid =='1') {
		$(".index").attr('href', "index.jsp");
	} else {
		$(".index").attr('href', "successindex.jsp");
	}
	$(function() {
		var sid = location.search;
		$.post(
						"findStuffId" + sid,
						function(data) {
							var json = JSON.parse(data);
							var img = "";
							for (i in json) {
								img += "<div class='flexslider'><ul class='slides'>";
								img += "<li data-thumb='images/"+json[i].sImage+"'><img src='images/"+json[i].sImage+"' /></li>";
								img += "<li data-thumb='images/"+json[i].sImage+"'><img src='images/"+json[i].sImage+"' /></li>";
								img += "<li data-thumb='images/"+json[i].sImage+"'><img src='images/"+json[i].sImage+"' /></li>";
								img += "<li data-thumb='images/"+json[i].sImage+"'><img src='images/"+json[i].sImage+"' /></li>";
								img += "</ul></div>";
							}
							$("#img").append(img);
						})
	});
</script>
<!-- FlexSlider -->
  <script defer src="js/jquery.flexslider.js"></script>
<!-- <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" /> -->

	<script>
// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});
</script>
</div>	
	<div id="xingqing">
	</div>
<script type="text/javascript">
	$(function(){
		var sid=location.search;
		$.post(
			"findStuffId"+sid,
			function (data) {
				var json=JSON.parse(data);
				var stuff="";
				for(i in json){
					stuff+="<div class='col-md-7 single-top-right'><div class='details-left-info simpleCart_shelfItem' id='add'>";
					stuff+="<h3 id='uids' value='${sessionScope.users.uid}'>"+json[i].sName+"</h3>";
					stuff+="<div class='price_single'><span class='reducedfrom'>"+json[i].sMoney+0+"￥</span><span class='actual item_price'>"+json[i].sMoney+"￥</span></div>";
					stuff+="</br>";
					stuff+="<h2 class='quick'>商品介绍:</h2><input style='display:none' id='sid' value='"+json[i].sid+"'/>";
					stuff+="<p class='quick_desc'>"+json[i].sContext+" ";
					stuff+="<div class='quantity_box'><ul class='product-qty'><span>选择数量:</span><select  style='margin-top: 20px;'' id='num'><option value='1'>1</option value='2'><option>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></ul></div> ";
					stuff+="<div class='single-but item_add'  style='margin-top: 30px;''><input id='sub' type='submit' value='加入购物车' onclick='cart()' /></div>";
					stuff+="</div></div>";
				}
				$("#xingqing").append(stuff);
			}
		)
	});
		 function cart(){
				var sid=$("#sid").val();
				var num=$("#num").val();
				var uid=$("#uids").attr('value');
				alert(uid);
				alert(sid);
				$.post(
						"addCart?sid="+sid+"&&cNum="+num+"&&uid="+uid,
					function(data){
							if(data!='null'){
								alert("添加购物车成功");
							}
						}
				)
			};
 
</script>
		
<div class="clearfix"></div>
	</div>
		<div class="latest products">
				<div id="shuju">
				</div>
		<script type="text/javascript">
		$(function () {
			$.post(
			"find6",
			function (data) {
				var json=JSON.parse(data);
				var obj="";
				for(i in json){
					obj+="<div class='col-md-4 product-left single-left'><div class='p-one simpleCart_shelfItem'>";
					obj+="<a href='single.jsp?sid="+json[i].sid+"'>";
					obj+="<img src='images/"+json[i].sImage+"'/>";
					obj+="<div class='mask mask1'><span>查看详情</span></div></a>";
					obj+="<h4>"+json[i].sName+"</h4>";
					obj+="<p><a class='item_add' href=''#''><i></i> <span class='item_price'>"+json[i].sMoney+"</span></a></p>";
					obj+="</div></div>";
				}
				$("#shuju").append(obj);
			})
		})
		
		function likeSelect() {
			var inputs=$("input[name='key']").val();
			$.post(
				"findKey",
				{"key":inputs},
				function (data) {
					var jsons=JSON.parse(data);
					var obj="";
					if(jsons==""){
						obj+="无数据";
					}
					for(i in jsons){
						obj+="<div class='col-md-4 product-left single-left'><div class='p-one simpleCart_shelfItem'>";
						obj+="<a href='single.jsp?sid="+jsons[i].sid+"'>";
						obj+="<img src='images/"+jsons[i].sImage+"'/>";
						obj+="<div class='mask mask1'><span>查看详情</span></div></a>";
						obj+="<h4>"+jsons[i].sName+"</h4>";
						obj+="<p><a class='item_add' href=''#''><i></i> <span class='item_price'>"+jsons[i].sMoney+"</span></a></p>";
						obj+="</div></div>";
					}
					$("#shuju").html(obj);
				}
			)
		}
	</script>
	
						
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="col-md-3 single-right">
					<h3>推荐</h3>
					<ul class="product-categories">
						<li><a href="#">雅诗兰黛 coi香水</a> <span class="count">588</span></li>
						<li><a href="#">圣罗兰 圣诞限量版口红</a> <span class="count">899</span></li>
						<li><a href="#">雅诗兰黛 coi香水</a> <span class="count">(2)</span></li>
						<li><a href="#">圣罗兰 圣诞限量版口红</a> <span class="count">(11)</span></li>
						<li><a href="#">圣罗兰 圣诞限量版口红</a> <span class="count">(3)</span></li>
						<li><a href="#">雅诗兰黛 coi香水</a> <span class="count">(3)</span></li>
					</ul>
		
					<h3>价钱</h3>
					<ul class="product-categories p1">
						<li><a href="#">600$-700$</a> <span class="count">(美元)</span></li>
						<li><a href="#">700￥-800￥</a> <span class="count">(人民币)</span></li>
						<li><a href="#">800$-900$</a> <span class="count">(美元)</span></li>
						<li><a href="#">900$-1000$</a> <span class="count">(美元)</span></li>
						<li><a href="#">1000￥-1100￥</a> <span class="count">(人民币)</span></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--end-single-->
	<!--start-footer-->
	<div class="footer">
		<div class="container">
			<div class="footer-top">
				<div class="col-md-3 footer-left">
					<h3>ABOUT US</h3>
					<ul>
						<li><a href="#">Who We Are</a></li>
						<li><a href="contact.html">Contact Us</a></li>
						<li><a href="#">Our Sites</a></li>
						<li><a href="#">In The News</a></li>
						<li><a href="#">Team</a></li>
						<li><a href="#">Carrers</a></li>					 
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>YOUR ACCOUNT</h3>
					<ul>
						<li><a href="account.html">Your Account</a></li>
						<li><a href="#">Personal Information</a></li>
						<li><a href="contact.html">Addresses</a></li>
						<li><a href="#">Discount</a></li>
						<li><a href="#">Track your order</a></li>					 					 
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>CUSTOMER SERVICES</h3>
					<ul>
						<li><a href="#">FAQ</a></li>
						<li><a href="#">Shipping</a></li>
						<li><a href="#">Cancellation</a></li>
						<li><a href="#">Returns</a></li>
						<li><a href="#">Bulk Orders</a></li>
						<li><a href="#">Buying Guides</a></li>					 
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>CATEGORIES</h3>
					<ul>
						<li><a href="#">Sports Shoes</a></li>
						<li><a href="#">Casual Shoes</a></li>
						<li><a href="#">Formal Shoes</a></li>
						<li><a href="#">Party Shoes</a></li>
						<li><a href="#">Ethnic</a></li>				 
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--end-footer-->
	<!--end-footer-text-->
	<div class="footer-text">
		<div class="container">
			<div class="footer-main">
				<p class="footer-class">Copyright &copy; 2015.Company name All rights reserved.More Templates - Collect from 河南财政金融学院</a></p>
			</div>
		</div>
		<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
		<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	</div>
	<!--end-footer-text-->	
</body>
</html>